<template>
  <div id="app" :class="{ 'is-mobile': isMobile }" @touchmove.prevent.stop>

    <user-guide v-if="userGuide" v-on:close-user-guide="closeUserGuide"></user-guide>

    <sidebar :state="sidebarState" @on-change="onChange">
    </sidebar>
    <topbar @on-change="onChange" :newMessage="newMessage" :path="path" :isMobile="isMobile" :fatherRoute="fatherRoute"></topbar>
    <div class="content" :class="{
                'sidebar-open': sidebarState === 'open',
                'sidebar-folded': sidebarState === 'folded'
            }">
      <transition name="fade">
        <div class="content-loading" v-show="loading">
          <div class="conent-loading-animate">
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </transition>
      <div class="content-content">
        <keep-alive>
          <router-view @on-view-load="onLoad"></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import "static/iconfont/iconfont";
import "static/iconfont/iconfont.css";

import Bus from "@/utils/event_bus";
import Topbar from "@/components/app/topbar";
import Sidebar from "@/components/app/sidebar";
import { message as messageAPI, userGuide as userGuideAPI } from "@/api";
import { menuConfig } from "@/config/menuConfig";

import UserGuide from "@/components/guide/user-guide";

import axios from "axios";

import newConfig from "@/config/newConfig.js";

let loadingHandler;
let page = 1;
let sum = 0;

export default {
  name: "app",
  data() {
    return {
      resourcecenter_menu: "数据资源",
      sidebarState: "open",
      loading: true,
      isMobile: !!window.navigator.userAgent.match(
        /(iPhone|iPod|iPad|Android|ios)/i
      ),
      newMessage: false,
      latestMessage: "",
      activeMenu: menuConfig["data"],
      fatherRoute: "",
      userGuide: this.$root.geohey ? this.$root.geohey.user.userGuide : false
    };
  },
  mounted() {
    // if ( window.localStorage ) {
    //     if ( !window.localStorage.revisionNotice ) {
    //         this.$notify.info( {
    //           title: '极海云平台全新改版！',
    //           message: '极海云平台迎来全新改版，如果您在使用过程中遇到任何问题，或者有意见建议，都可以点击左下角的“联系客服”反馈给我们',
    //           duration: 20000
    //         } );

    //         window.localStorage.revisionNotice = true;
    //     }
    // }

    this.handleHttpHeader();
    // this.checkUserStatus();

    Bus.$on("all-message-readed", this.resetNewMessage);
    Bus.$on("on-submenu-change", this.setSubmenu);
    Bus.$on("UPDATE_RESOURCECENTER_PATH", e => {
      this.activeMenu = { name: "服务中心", childMenu: e };
      this.resourcecenter_menu = e;
    });
    this.getSummary();
    setInterval(this.getSummary, 100000);
  },

  watch: {
    $route: {
      deep: true,
      handler(val) {
        let path = val.path;
        if (!path) return null;

        //let father = path.split('/')[1].toLowerCase();
        let father = path.split("/")[1];
        this.activeMenu = menuConfig[father];
        this.fatherRoute = father;
      }
    }
  },

  computed: {
    path() {
      //console.log(1111);

      let activeMenu = this.activeMenu;
      if (activeMenu) {
        let array = [activeMenu.name, activeMenu.childMenu];
        let res = array.filter(n => !!n);
        return res;
      } else {
        return ["服务中心", this.resourcecenter_menu];
      }
    }
  },

  methods: {
    onChange() {
      //console.log(this.activeMenu);
      // if(['资源注册', '数据加工'].includes(this.activeMenu.name)){
      //     return;
      // }
      // clearTimeout( loadingHandler );
      // loadingHandler = setTimeout( () => {
      //     this.loading = true;
      // }, 500 );
    },

    async onLoad() {
      clearTimeout(loadingHandler);
      this.loading = false;
    },

    async getSummary() {
      let res = await messageAPI.summary();

      if (!res || res.data.code != 0) {
        return;
      }

      let data = res.data.data;
      //如果短时间内收到多条消息只能提示多了一条
      if (data.unread) {
        this.newMessage = true;

        if (data.createdAt != this.latestMessage) {
          this.latestMessage = data.createdAt;
          Bus.$emit("get-new-message");
        }
      }
    },

    setSubmenu(name) {
      //console.log(name);
      // console.log(this.activeMenu);

      this.activeMenu.childMenu = name;
    },

    resetNewMessage() {
      this.newMessage = false;
    },

    closeUserGuide(neverShow) {
      if (neverShow) {
        userGuideAPI.addNewUser();
      }
      this.userGuide = false;
    },
    checkUserStatus() {
      let url = `${newConfig.host}/cloud/sign/status`;
      this.$root.$http.get(url).then(response => {
        if (response.data.code != 0) {
          window.location = `${newConfig.host}/sign`;
          // console.log(response);
        }
      });
    },
    handleHttpHeader() {
      this.$root.$http = axios;
      let token = this.getCookie("token");
      if (!token) {
        axios.defaults.headers["token"] = "";
        return;
      }
      axios.defaults.headers["token"] = token;
    },
    getCookie(cookie_name) {
      var allcookies = document.cookie;
      var cookie_pos = allcookies.indexOf(cookie_name);
      if (cookie_pos != -1) {
        cookie_pos = cookie_pos + cookie_name.length + 1;
        var cookie_end = allcookies.indexOf(";", cookie_pos);
        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        }
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    }
  },

  components: {
    Sidebar,
    Topbar,
    UserGuide
  }
};
</script>

<style lang="scss">
@import "reset";
@import "g";

@function delay($interval, $count, $index) {
  @return ($index * $interval) - ($interval * $count);
}

@mixin ball-pulse-sync($n: 3, $start: 1) {
  @for $i from $start through $n {
    > div:nth-child(#{$i}) {
      animation: ball-pulse-sync 0.6s delay(0.07s, $n, $i) infinite ease-in-out;
    }
  }
}

$amount: 10px;

@keyframes ball-pulse-sync {
  33% {
    transform: translateY($amount);
  }
  66% {
    transform: translateY(-$amount);
  }
  100% {
    transform: translateY(0);
  }
}
.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: "";
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
  color: $dark;
  min-width: 800px;

  &.is-mobile {
    .g-scrollbar-scrollbar-horizontal,
    .g-scrollbar-scrollbar-vertical {
      display: none;
    }
    .g-scrollbar-wrapper {
      position: static;
    }
  }

  .content {
    padding-top: 72px;
    height: 100%;
    position: relative;
    overflow: hidden; // BFC

    .content-loading {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: 100%;
      background: $bgWhite;
      opacity: 1;

      .conent-loading-animate {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -120px;
        margin-left: -100px;
        text-align: center;
        line-height: 200px;
        @include ball-pulse-sync();

        > div {
          width: 15px;
          height: 15px;
          background-color: $primary;
          border-radius: 100%;
          margin: 5px;
          display: inline-block;
        }
      }

      &.fade-leave-active {
        opacity: 0;
        transition: opacity 0.3s;
      }
    }

    .content-content {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
}

.g-message-box-wrapper {
  background-color: rgba(0, 0, 0, 0.5);

  .g-message-box {
    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);

    .g-message-box-header {
      padding: 0 20px 0;
      height: 49px;
      line-height: 48px;
      border-bottom: 1px solid $bdGray;

      > i {
        top: 16px;
      }
    }

    .g-message-box-content {
      // background-color: $bgMessage;
      padding: 30px 20px 0;
    }
  }
}

.fade-enter-active {
  animation: panel-fade-in 0.3s;
}

.fade-leave-active {
  animation: panel-fade-out 0.3s;
}

@keyframes panel-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes panel-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
.el-dialog__header {
  padding: 0 20px !important;
  background-color: #4087f7;
}
.el-dialog__header .el-dialog__title {
  color: #fff !important;
  line-height: 35px !important;
  font-size: 14px;
}
.el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
}
.el-dialog__headerbtn {
  top: 10px !important;
  right: 10px !important;
}
.el-dialog__body {
  padding: 5px 0 30px 20px !important;
}
.map-dialog .el-dialog__body {
  height: 100%;
  padding: 0 0 5px 0 !important;
}
.el-collapse-item__header {
  line-height: 35px !important;
  height: 35px !important;
  font-size: 13px !important;
  // background-color: #f5f5f5 !important;
  // padding-left: 10px;
}
.el-collapse-item__header:hover {
  background-color: #ddd !important;
  border-radius: 3px;
}
.el-table thead {
  color: #000 !important;
}
.el-table__header .cell {
  font-weight: normal !important;
}
.el-table td,
.el-table th {
  padding: 6px 0 !important;
}
.el-table th {
  background: #f6f8fb !important;
}
.el-checkbox__original {
  width: 0px !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 1) !important;
}
.selectedData .el-form-item__label {
  font-size: 12px !important;
}
// .selectedData  .el-select-dropdown__item{
//     font-size: 12px !important;
//     height: 25px !important;
//     line-height: 25px !important;
// }
.dialog-loading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9999;
  display: none;
}
.search-input .el-input__inner {
  border-radius: 17px;
}
// .el-table-filter{
//     max-height: 500px !important;
//     overflow: auto !important;
// }
.el-collapse-item__arrow {
  margin: 0 38px 0 auto !important;
}

.icontixing {
  color: #1890ff;
}
.icontongguo {
  color: #52c41a;
}
.iconjujue {
  color: #f5222d;
}

#resource-center .map-dialog {
  height: 85%;
}
</style>
